<template>
    <div>
        <p style="display: flex">
            <el-button type="info" icon="el-icon-refresh" size="mini"
                       @click="list()">刷新
            </el-button>
            <el-button type="info" size="mini"
                       @click="dialogVisible=true">添加
            </el-button>
            <el-button type="info" icon="el-icon-refresh" size="mini"
                       @click="list()">刷新
            </el-button>
        </p>
        <p style="display: flex">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="pageInfo.size"
                    :current-page="pageInfo.page"
                    @current-change="list"
                    :total="pageInfo.total">
            </el-pagination>
            <el-select v-model="pageInfo.size" placeholder="请选择"
                       @change="list(1)">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"

                        :value="item.value">
                </el-option>
            </el-select>
        </p>
        <div>
            <el-dialog title="添加${tableNameCn}" :visible.sync="dialogVisible">
                <el-form :model="form">
                    <#list fieldList as field>
                        <#if field.name!="id" && field.nameHump!="createdAt" && field.nameHump!="updatedAt">
                            <#if field.enums>
                                <el-form-item label="${field.nameCn}" :label-width="formLabelWidth">
                                    <el-select v-model="form.${field.nameHump}" placeholder="请选择">
                                        <el-option
                                                v-for="item in ${field.enumsConst}"
                                                :key="item.key"
                                                :label="item.value"
                                                :value="item.key">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            <#else>
                                <el-form-item label="${field.nameCn}" :label-width="formLabelWidth">
                                    <el-input v-model="form.${field.nameHump}" autocomplete="off"></el-input>
                                </el-form-item>
                            </#if>

                        </#if>

                    </#list>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible= false">取 消</el-button>
                    <el-button type="primary" @click="save${Domain}">确 定</el-button>
                </div>
            </el-dialog>
            <el-table
                    :data="pageInfo.list"
                    style="width: 100%">
                <#list fieldList as field>
                    <#if field.enums>
                        <el-table-column
                                label="${field.nameCn}"
                                width="180">
                            <template slot-scope="scope">
                                {{ ${field.enumsConst} | optionKV(scope.row.${field.nameHump}) }}
                            </template>
                        </el-table-column>

                    <#else>
                        <el-table-column
                                prop="${field.nameHump}"
                                label="${field.nameCn}"
                                width="180">
                        </el-table-column>
                    </#if>
                </#list>

                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

    </div>
</template>

<script>
    import {list, delete${Domain}, save${Domain}} from "@/network/${domain}";
    import {Confirm} from '@/assets/js/confirm'
    import {Validator} from "@/assets/js/validator";

    export default {
        name: "${domain}",
        mounted() {
            this.list(1)
        },
        data() {
            return {
                <#list fieldList as field>
                <#if field.enums>
                ${field.enumsConst}: ${field.enumsConst},
                </#if>
                </#list>
                pageInfo: {
                    page: 1,
                    size: 1,
                    list: [],
                    total: 0,
                }, options: [
                    {
                        value: 1,
                        label: 1
                    },
                    {
                        value: 5,
                        label: 5
                    },
                    {
                        value: 10,
                        label: 10
                    },
                    {
                        value: 50,
                        label: 50
                    },],
                dialogVisible: false,
                form: {},
                formLabelWidth: '120px'
            }
        },
        methods: {
            list(page) {
                if (page === null || page === undefined) {
                    page = this.pageInfo.page
                }
                let _this = this;
                list(page, _this.pageInfo.size).then(res => {
                    _this.pageInfo = res.data
                })
            },
            save${Domain}() {
                let _this = this;
                // 保存校验
                if (1 !== 1
                    <#list fieldList as field>
                    <#if field.name!="id" && field.nameHump!="createdAt" && field.nameHump!="updatedAt" && field.nameHump!="sort">
                    <#if !field.nullAble>
                    || !Validator.require(_this.form.${field.nameHump}, "${field.nameCn}")
                    </#if>
                    <#if (field.length > 0)>
                    || !Validator.length(_this.form.${field.nameHump}, "${field.nameCn}", 1, ${field.length?c})
                    </#if>
                    </#if>
                    </#list>
                ) {
                    return;
                }

                save${Domain}(_this.form).then(res => {
                    _this.$message.success("保存成功");
                    _this.form = {}
                    _this.dialogVisible = false;
                    _this.list()
                })
            },
            edit(row) {
                console.log(row);
                let _this = this;
                _this.form = Object.assign({}, row)
                _this.dialogVisible = true;
            },
            del(row) {
                let _this = this;
                Confirm.show('此操作将永久删除该文件, 是否继续?', function () {
                    delete${Domain}(row.id).then(res => {
                        _this.list();
                        _this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    })
                })

            }
        }
    }
</script>

<style scoped>

</style>
